<!--
- Author:   .
- Date:    2017/7/14 0014.
- File:    spread.
-->
<template>
  <div>
    <!--<div class="recode_text">长按下面二维码保存图片或发送给朋友<br/>邀请成功后，当您的朋友购买商品时您将获得积分</div>-->
    <div id="qrcode_view" style="padding-bottom: 2.55rem">
      <img id="qr-view" src='' style="width:100%; height:auto;"/>
    </div>
    <div class="code_bg" id="bgimg" style=" margin-left:20rem;">
      <div class="Web_Box2">

        <!--头像-->
        <div class="code_head clear">
          <div class="codeimg"><img ref="" :src="memberInfo.member_avatar"></div>
          <div class=" textcode"><p>{{memberInfo.member_name}}</p>
            <p>为您推荐云南云香会员平台</p></div>
        </div>
        <!--头像 end-->
        <!--二维码-->

        <div class="mycode"><img ref="qr-img" :src="memberInfo.qrcode_image">
          <p class="erm">长按二维码点击识别二维码</p></div>
        <!--二维码 end-->
      </div>
    </div>
    <div class="Extension" v-show="deviceType == 'APICloud'"><a @click="saveToAlbum">保存到相册</a><a @click="wxShare">分享</a></div>
    <div class="pl20 pr20 mt35" style="position: fixed; bottom:  10px; width: 100%">
      <button type="button" class="but_1 wauto" @click="$utils.back">返回</button>
    </div>
  </div>
</template>

<script>
  //  import * as request from '../../request'
  let html2canvas = require('html2canvas')
  //  let avatar = require('../../assets/images/avatar.png')

  export default{
//    beforeRouteEnter (to, from, next) {
//      request.getMemberInfo().then(data => {
//        next(vm => {
//          if (!data.member_avatar || data.member_avatar == '') {
//            data.member_avatar = avatar
//          }
//          vm.memberInfo = data
//        })
//      }).catch(e => {
//        next()
//      })
//    },
    data() {
      return {
        deviceType: this.$utils.getDeviceType(),
        memberInfo: this.$storage.getMemberInfo()
      }
    },
    components: {},
    mounted() {
//      this.getMemberInfo()
      setTimeout(() => {
        let bg = require('../../assets/images/erweim.png')
        Promise.all([this.$utils.imgLoaded(this.memberInfo.member_avatar), this.$utils.imgLoaded(this.memberInfo.qrcode_image), this.$utils.imgLoaded(bg)]).then(() => {
          console.log('三张图都加载成功')
          this.initCanvas()
        }).catch(e => {
          this.$toast('获取用户的二维码失败')
          console.log('有图片未加载完成', e)
          document.getElementById('bgimg').style.display = 'none'
        })
      }, 500)
    },
    methods: {
      wxShare() {
        let _this = this
        let timestamp = _this.$utils.getTimestamp()
        window.api.download({
          url: _this.memberInfo.qrcode_image,
          savePath: 'fs://memberSpread_' + timestamp + '.png',
          report: true,
          cache: true,
          allowResume: true
        }, function (ret, err) {
          if (ret.state == 1) {
            var wx = window.api.require('wx')
            wx.shareImage({
              apiKey: '',
              scene: 'session',
//          thumb: 'widget://a.jpg',
              contentUrl: 'fs://memberSpread_' + timestamp + '.png'
            }, function(ret, err) {
              if (ret.status) {
                _this.$toast('分享成功')
              } else {
                _this.$toast('分享失败:' + err.code)
              }
            })
          } else {
            _this.$toast('获取二维码失败', err.msg)
          }
        })
      },
      saveToAlbum() {
        let _this = this
        let timestamp = _this.$utils.getTimestamp()
        window.api.download({
          url: _this.memberInfo.qrcode_image,
          savePath: 'fs://memberSpread_' + timestamp + '.png',
          report: true,
          cache: true,
          allowResume: true
        }, function (ret, err) {
          if (ret.state == 1) {
            window.api.saveMediaToAlbum({
              path: 'fs://memberSpread_' + timestamp + '.png'
            }, function (ret, err) {
              if (ret && ret.status) {
                _this.$toast('保存成功')
              } else {
                _this.$toast('保存失败:' + err.msg)
              }
            })
          } else {
            _this.$toast('下载二维码失败', err.msg)
          }
        })
      },
      initCanvas() {
        html2canvas(document.getElementById('bgimg'), {
          onrendered: function (canvas) {
            var imgData = canvas.toDataURL()
            document.getElementById('qr-view').src = imgData
            // console.log(imgData)
            document.getElementById('bgimg').style.display = 'none'
            // document.getElementById('qrcode_view').style.display = ''
          }
        })
      }
    }
  }
</script>

<style>

</style>
